import React, {Component} from 'react';
import {Col, Checkbox, Form, Input, Mentions, Modal, Row} from 'antd/lib/index';
import {gatewayPost} from "../../../util/requestUtil";

const FormItem = Form.Item;
const {Option} = Mentions;

//@Form.create()
class userModify extends Component {

    state = {isDelay: true}

    componentWillReceiveProps(nextProps) {
        if (nextProps.modalVisible && this.props.modalVisible !== nextProps.modalVisible) {
            gatewayPost('/sms/channel/channelDetail', nextProps.selectedChannelId).then(res => {
                if (res) {
                    this.setState({
                        channelDetail: res
                    });
                    const {channelCode, channelName, content, priority} = res
                    this.props.form.setFieldsValue({
                        channelCode:channelCode,
                        channelName:channelName,
                        content,
                        priority:priority
                    })
                }
            })
        }
    }

    handleOk = (data) => {
        this.props.form.validateFields((err, fieldsValue) => {
            if (err) return;
            fieldsValue.id = this.props.selectedChannelId;
            gatewayPost('/sms/channel/msgChannelModify', fieldsValue).then(res => {
                // 返回成功处理
                this.props.handleEditModal()
                this.props.form.resetFields()
            })
        });

    }

    handleCancel = () => {
        this.props.handleEditModal()
        this.props.form.resetFields()
    }

    onChange(value, dateString) {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
    }

    onOk(value) {
        console.log('onOk: ', value);
    }

    onChange = (value) => {
        if (value == 1) {
            this.setState({isDelay: true})
        } else {
            this.setState({isDelay: false})
        }
    }

    handlePriority = (rule, value, callback) => {
        let rgx = /^[0-9]\d*$/
        if (value == "") {
            callback(new Error("优先级不能为空！"));
        }
        else if (rgx.test(value)) {
            var num = parseInt(value);
            const prams = [this.props.selectedChannelId,num]
            gatewayPost('/sms/channel/isRepeatPriority', prams).then(res => {
                if(res.isRepeat){
                    callback(new Error("优先级重复,请重新输入！"));
                }else {
                    callback();
                }
            });
        }
        else if(!rgx.test(value)) {
            callback(new Error('请输入正确的优先级! 例如(1,2,3...)！'))
        }
    }

    render() {
        const {modalVisible, dict,form: {getFieldDecorator}} = this.props;
        const {isDelay} = this.state;
        const {TextArea} = Input;
        const roleList = []
        const formItemLayout = {
            labelCol: {//标签位的格栅数量
                sm: {span: 8},
                xxl: {span: 6},
            },
            wrapperCol: {//表单的格栅数量
                sm: {span: 16},
                xxl: {span: 18},
            },
        };
        return (

            <Modal
                title="修改渠道"
                visible={modalVisible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={700}
            >

                <Form
                    {...formItemLayout}
                >
                    <Row gutter={12}>
                        <Col sm={12} xxl={24}>
                            <FormItem label="渠道名称">
                                {getFieldDecorator('channelName', {
                                    rules: [{
                                        required: true,
                                        message: '渠道名称不能超过50个字符!',
                                        max: 50,
                                    }]
                                })(
                                    <Input name="channelName"/>
                                )}
                            </FormItem>
                        </Col>
                        <Col sm={12} xxl={24}>
                            <FormItem label="渠道编码">
                                {getFieldDecorator('channelCode', {
                                })(
                                    <Input name="channelCode" disabled={true}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col sm={12} xxl={24}>
                            <FormItem label="备注">
                                {getFieldDecorator('content', {
                                    rules: [{
                                        required: true,
                                        message: '备注不能超过200个字符!',
                                        max: 200,
                                    }]
                                })(
                                    <TextArea rows={4}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col sm={12} xxl={24}>
                            <FormItem label="优先级">
                                {getFieldDecorator('priority', {
                                    rules: [
                                        {
                                            validator: this.handlePriority
                                        }]
                                })(
                                    <Input name="priority" />
                                )}
                            </FormItem>
                        </Col>
                        <Col>
                            <FormItem label="角色">
                                {getFieldDecorator('roleIds', {
                                    initialValue: [],
                                })(
                                    <Checkbox.Group>
                                        {roleList.map(role => (
                                            <Checkbox key={role.id} value={role.id}>{role.name}</Checkbox>
                                        ))}
                                    </Checkbox.Group>,
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        );
    }
}

const UserModify = Form.create()(userModify);
export default UserModify;
